WD PLUS 2020-11 (dashboard)

8. Programowanie obiektowe w JS-ie (Moduł)

8.5. Uruchamiamy akordeon

Zadanie: dokończenie akordeonu

Dokończenie funkcji initAccordion jest Twoim zadaniem w tym submodule. Wszystkie operacje, które są do wykonania, były już wykorzystywane przez nas w poprzednim projekcie.

Oczekiwany efekt

Po odświeżeniu strony, pod żadnym z produktów nie powinny być widoczne opcje (razem z wyborem ilości i guzikiem dodania do koszyka).

Efektem tego zadania powinna być funkcjonalność, dzięki której po kliknięciu w nazwę produktu, opcje powinny się pokazać, ale tylko dla tego produktu.

Jeśli jeden produkt ma wyświetlone opcje, to kliknięcie w nazwę innego produktu powinno zamknąć opcje wcześniej otwartego produktu, i jednocześnie pokazać opcje produktu, którego nazwę kliknęliśmy.

Jeśli czujesz się pewnie, to od razu bierz się do pracy. Jeśli jednak masz jakieś problemy, skorzystaj z poniższych wskazówek.

Pokaż podpowiedzi Ukryj podpowiedzi

Do rozwiązania tego zadania przydadzą Ci się te informacje:

  • aby odnaleźć clickableTrigger, użyj selektora select.menuProduct.clickable,
  • zastanów się, czy szukać elementu clickableTrigger w całym dokumencie, czy może jednak dokładniej?
  • element bieżącego produktu to thisProduct.element, czyli to na tym elemencie będziemy dodawać i usuwać (toggle) klasę zdefiniowaną w select.menuProduct.clickable,
  • aby sprawdzić, czy dany element DOM udało się znaleźć, wystarczy sprawdzić, czy nie jest nullem if(activeProduct),
  • do sprawdzenia, czy dany aktywny produkt jest różny od elementu bieżącego produktu, wystarczy wykorzystać takiego samego operatora porównania, jak przy porównywaniu liczb.
;